<script setup lang="ts">
import QuestionList from "../Question/QuestionList.vue";
import {onMounted, ref} from "vue";
import {Question, Tag} from "../../types/mytypes";
import {QuestionRequest, TagRequest} from "../../request/MyRequset";

const emit = defineEmits(['err', 'use', 'cancel'])
let selectTag = ref('')
let allTag = ref<Tag[]>([])
let showList = ref(false)
let selectQuestionList = ref<Question[]>([])
let selectQuestion = ref<Question>()

onMounted(async () => {
  let allTagRes = await TagRequest.getAll();
  if (allTagRes.suc) {
    allTag.value = allTagRes.data
    selectTag.value = allTag.value[0].name
  } else {
    emit('err', allTagRes.message)
  }
})
const search = async () => {
  let tagAllRes = await QuestionRequest.getByTag(selectTag.value)
  if(tagAllRes.suc){
    selectQuestionList.value = tagAllRes.data
    showList.value = true
  }else{
    emit("err",tagAllRes.message)
  }
}
</script>

<template>
  <el-form :inline="true">
    <el-form-item label="选择题目标签">
      <el-select filterable v-model="selectTag">
        <el-option v-for="item in allTag" :value="item.name"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="search" type="primary">搜索</el-button>
    </el-form-item>
    <el-scrollbar max-height="25em">
      <QuestionList @select="args => selectQuestion=args" :select-mode="true" v-if="showList" :show-question="selectQuestionList"></QuestionList>
    </el-scrollbar>
    <el-form-item style="margin-top: 1em">
      <el-button @click="emit('use',selectQuestion)" type="primary" v-if="selectQuestion != undefined">添加
      </el-button>
      <el-button @click="emit('cancel')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>